HTMX এর সাথে Django এবং Flask ইন্টিগ্রেট করে ডাটাবেস CRUD (Create, Read, Update, Delete) অপারেশন বাস্তবায়ন করা সম্ভব। এই প্রক্রিয়া সাধারণত একটি ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে যা AJAX রিকোয়েস্টের মাধ্যমে দ্রুত কাজ করে। নিচে Django এবং Flask উভয়ের জন্য CRUD অপারেশন বাস্তবায়নের উদাহরণ দেওয়া হলো।
1. Django এর সাথে HTMX ব্যবহার করে CRUD অপারেশন
ধাপ ১: Django সেটআপ
প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:
pip install django
Django প্রোজেক্ট তৈরি করুন:
django-admin startproject myproject
cd myproject
django-admin startapp myapp
ধাপ ২: মডেল তৈরি করুন
myapp/models.py:
from django.db import models
class Item(models.Model):
name = models.CharField(max_length=100)
def __str__(self):
return self.name
ধাপ ৩: মাইগ্রেশন এবং ডাটাবেস তৈরি করুন
python manage.py makemigrations
python manage.py migrate
ধাপ ৪: Django Views তৈরি করুন
myapp/views.py:
from django.shortcuts import render, redirect
from django.http import JsonResponse
from .models import Item
def index(request):
items = Item.objects.all()
return render(request, 'index.html', {'items': items})
def add_item(request):
if request.method == 'POST':
name = request.POST.get('name')
Item.objects.create(name=name)
return redirect('index')
def delete_item(request, item_id):
item = Item.objects.get(id=item_id)
item.delete()
return redirect('index')
ধাপ ৫: Django URLs সেটআপ করুন
myapp/urls.py:
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('add-item/', views.add_item, name='add_item'),
path('delete-item/<int:item_id>/', views.delete_item, name='delete_item'),
]
myproject/urls.py:
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('myapp.urls')),
]
ধাপ ৬: HTMX ব্যবহার করে HTML ফাইল তৈরি করুন
templates/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Django HTMX CRUD Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Items List</h2>
<form hx-post="{% url 'add_item' %}" hx-target="#item-list" hx-swap="innerHTML">
<input type="text" name="name" placeholder="Enter item name" required>
<button type="submit">Add Item</button>
</form>
<div id="item-list">
<ul>
{% for item in items %}
<li>
{{ item.name }}
<button hx-get="{% url 'delete_item' item.id %}" hx-target="#item-list" hx-swap="innerHTML">Delete</button>
</li>
{% endfor %}
</ul>
</div>
</body>
</html>
2. Flask এর সাথে HTMX ব্যবহার করে CRUD অপারেশন
ধাপ ১: Flask সেটআপ
প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:
pip install flask flask-sqlalchemy
ধাপ ২: Flask অ্যাপ্লিকেশন তৈরি করুন
app.py:
from flask import Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///items.db'
db = SQLAlchemy(app)
class Item(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(100), nullable=False)
@app.route('/')
def index():
items = Item.query.all()
return render_template('index.html', items=items)
@app.route('/add-item', methods=['POST'])
def add_item():
name = request.form.get('name')
new_item = Item(name=name)
db.session.add(new_item)
db.session.commit()
return redirect('/')
@app.route('/delete-item/<int:item_id>', methods=['GET'])
def delete_item(item_id):
item = Item.query.get(item_id)
db.session.delete(item)
db.session.commit()
return redirect('/')
if __name__ == '__main__':
db.create_all() # Create database and tables
app.run(debug=True)
ধাপ ৩: HTMX ব্যবহার করে HTML ফাইল তৈরি করুন
templates/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask HTMX CRUD Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Items List</h2>
<form hx-post="/add-item" hx-target="#item-list" hx-swap="innerHTML">
<input type="text" name="name" placeholder="Enter item name" required>
<button type="submit">Add Item</button>
</form>
<div id="item-list">
<ul>
{% for item in items %}
<li>
{{ item.name }}
<button hx-get="/delete-item/{{ item.id }}" hx-target="#item-list" hx-swap="innerHTML">Delete</button>
</li>
{% endfor %}
</ul>
</div>
</body>
</html>
3. CRUD অপারেশন টেস্ট করা
Django:
- Django সার্ভার চালান:
python manage.py runserver
- ব্রাউজারে যান:
http://127.0.0.1:8000
Flask:
- Flask সার্ভার চালান:
python app.py
- ব্রাউজারে যান:
http://127.0.0.1:5000
উপসংহার
HTMX এর সাথে Django এবং Flask ব্যবহার করে CRUD অপারেশন তৈরি করা খুবই সহজ। HTMX এর মাধ্যমে AJAX রিকোয়েস্টের মাধ্যমে ডাইনামিক কন্টেন্ট লোড এবং ফর্ম ডেটা সাবমিট করা যায়।
- Django: CRUD অপারেশন তৈরি করা।
- Flask: CRUD অপারেশন তৈরি করা।
এই উদাহরণগুলি অনুসরণ করে, আপনি আপনার প্রোজেক্টে HTMX অন্তর্ভুক্ত করতে পারেন এবং ইন্টারঅ্যাকটিভ CRUD ফিচার তৈরি করতে পারেন।
Content added By
Read more
